<template>
  <div id="myEchart"></div>
</template>

<script>
// 引入js，不需要带后缀
import Sever from '@/api/selfApi'
const echarts = require('echarts')
export default {
  name: 'echartsTest',
  data() {
    return {
      data: [],
      jgsum: 0
    }
  },
  mounted() {
    this.initEchart();
  },
  methods: {
    async initEchart() {
      //请求后台返回数据
      try {
        //请求后台接口
        const res = await Sever.analyse.getZgbmNumOfSystem({
            //请求参数(this.depCode是全局变量)
            dep_code: this.depCode
        })
        //取值赋给name和value
        let arr = res.map(item => {
          this.jgsum += item.JGNUM;
          return {
            name: item.SYSTEM_CODE_NAME + '(' + item.JGNUM +  ')',
            value: item.JGNUM
          }
        })
        //赋值给变量
        this.data = arr
      } catch (error) {
        console.log(error)
      }
      //初始化echarts组件
      const myChart = echarts.init(document.getElementById('myEchart'))
      myChart.clear()
      const option = {
        title: {
          show: true,
          text: '分系统评估情况', //主标题文本
          x: 'center', //水平安
          y: '20px', //垂直
          textStyle: {
            fontSize: 20,
            fontStyle: 'normal',
            fontWeight: '666',
            color: '#333'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)",
          /*formatter:function(val){   //让series 中的文字进行换行
               console.log(val);//查看val属性，可根据里边属性自定义内容
               var content = var['name'];
               return content;//返回可以含有html中标签
           },*/ //自定义鼠标悬浮交互信息提示，鼠标放在饼状图上时触发事件
        },//提示框，鼠标悬浮交互时的信息提示
        graphic: {
          type: 'text',
          left: 'center',
          top: 'center',
          style: {
            text: '评估机构数\n' + this.jgsum, //使用“+”可以使每行文字居中
            textAlign: 'center',
            font: 'bolder 16px cursive',
            fill: '#000',
            width: 30,
            height: 30
          }
        },//此例饼状图为圆环中心文字显示属性，这是一个原生图形元素组件，功能很多
        series: [
          {
            name: '用户统计',//tooltip提示框中显示内容
            type: 'pie',//图形类型，如饼状图，柱状图等
            radius: ['30%', '50%'],//饼图的半径，数组的第一项是内半径，第二项是外半径。支持百分比，本例设置成环形图。具体可以看文档或改变其值试一试
            //roseType:'area',是否显示成南丁格尔图，默认false
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  textStyle: { color: '#3c4858', fontSize: "16" },
                  formatter: function (val) {   //让series 中的文字进行换行
                    return val.name.split("-").join("\n");
                  }
                },//饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。可以与itemStyle属性同级，具体看文档
                labelLine: {
                  show: true,
                  lineStyle: { color: '#3c4858' }
                }//线条颜色
              },//基本样式
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',//鼠标放在区域边框颜色
                textColor: '#000'
              }//鼠标放在各个区域的样式
            },
            data: this.data,//数据，数据中其他属性，查阅文档
            color: ['#51CEC6', '#FFB703', '#5FA0FA'],//各个区域颜色
          },//数组中一个{}元素，一个图，以此可以做出环形图
        ],//系列列表
      }
      myChart.setOption(option)
      // -----------------------------------------------------------------
      // 响应式变化
      window.addEventListener('resize', () => myChart.resize(), false)
    }
  }
}
</script>

<style lang="scss">
#myEchart {
  width: 100%;
  box-sizing: border-box;
  height: 60%;
  overflow: hidden;
}
</style>
